<script setup>
import { fetch7DayData } from '../api/weatherAPI'
import { ref, watch } from 'vue'
import dayjs from 'dayjs'
import { initTemperatureChange } from '../util/echarts'

const maxTemp = ref([]) //最高温度
const minTemp = ref([]) //最低温度
const fxDate = ref([]) //预报时间
const updateTime = ref('')
const chartDom = ref(null)
import { useCityStore } from '../stores/cityStore'
const cityStore = useCityStore()
watch(
  () => cityStore.location,
  () => {
    getDate(cityStore.location.id)
  },
  { immediate: true }
)
async function getDate(locationID) {
  const res = await fetch7DayData(locationID)
  // console.log(res)
  updateTime.value = dayjs(res.updateTime).format('YYYY年MM月DD日 HH时mm分')
  maxTemp.value = []
  minTemp.value = []
  fxDate.value = []
  res.daily.forEach((element) => {
    fxDate.value.push(element.fxDate)
    maxTemp.value.push(element.tempMax)
    minTemp.value.push(element.tempMin)
  })
  initTemperatureChange(chartDom.value, fxDate.value, minTemp.value, maxTemp.value)
}
</script>
<template>
  <div>
    <h3>未来7天天气预报</h3>
    <div>
      <span>最后更新时间:{{ updateTime }}</span>
    </div>
    <div id="main" ref="chartDom"></div>
  </div>
</template>

<style scoped>
#main {
  width: 100%;
  height: 400px;
}
</style>
